<template>
  <div>
    <div class="n-layout-page-header">
      <n-card
        :bordered="false"
        title="实体"
        class="mt-4 proCard"
        size="small">
        <n-alert title="" type="info">
          请粘贴一个你的实体类
        </n-alert>
        <n-input
          @input="handleInput"
          style="margin-top: 10px; height: calc(100% - 80px)"
          v-model:value="inputValue"
          type="textarea"
          placeholder="请粘贴一个你的实体类"
          clearable
        />
      </n-card>
      <n-card
        :bordered="false"
        title="生成"
        class="mt-4 proCard"
        size="small"
        :segmented="{ content: true }"
      >
        <n-card title="" style="margin-bottom: 16px">
          <n-tabs @update:value="handleCopy" type="line" animated>
            <n-tab-pane :style="{ background: retValue1 ? 'lightgoldenrodyellow' : 'white' }"
                        :name="1" tab="生成 if and sql 语句">
              <n-button v-if="retValue1" @click="toCopy" style="width: 100%" type="info">
                复制
              </n-button>
              <n-code style="margin-top: 12px" :code="retValue1" language="cpp" show-line-numbers/>
            </n-tab-pane>
            <n-tab-pane :style="{ background: retValue1 ? 'lightgoldenrodyellow' : 'white' }"
                        :name="2" tab="生成 and sql 语句">
              <n-button v-if="retValue2" @click="toCopy" style="width: 100%" type="info">
                复制
              </n-button>
              <n-code style="margin-top: 12px" :code="retValue2" language="cpp" show-line-numbers/>
            </n-tab-pane>
            <n-tab-pane :style="{ background: retValue1 ? 'lightgoldenrodyellow' : 'white' }"
                        :name="3" tab="生成 json 语句">
              <n-button v-if="retValue3" @click="toCopy" style="width: 100%" type="info">
                复制
              </n-button>
              <n-code style="margin-top: 12px" :code="retValue3" language="cpp" show-line-numbers/>
            </n-tab-pane>
          </n-tabs>
        </n-card>
      </n-card>
    </div>
  </div>
</template>

<script lang="ts" setup>

import {ref} from "vue";
import axios from "axios";
import {copy} from "@/utils";

let inputValue = ref<string>('');
let tabValue = ref<number>(1);
let retValue1 = ref<string>('');
let retValue2 = ref<string>('');
let retValue3 = ref<string>('');

const handleInput = (val) => {
  console.log(val);
  var formData = new FormData();
  formData.append('str', val)
  axios.post('http://localhost:2023/generate', formData).then(res => {
    console.log(res.data)
    let {ret1, ret2, ret3} = res.data
    retValue1.value = ret1
    retValue2.value = ret2
    retValue3.value = ret3
  })
};


const handleCopy = (key) => {
  console.log(key)
  tabValue.value = key
}

const toCopy = () => {
  if (1 === tabValue.value) {
    copy(retValue1.value)
  } else if (2 === tabValue.value) {
    copy(retValue2.value)
  } else if (3 === tabValue.value) {
    copy(retValue3.value)
  }
}

</script>

<style lang="less" scoped>

.n-layout-page-header {
  display: flex;
}

.n-tabs .n-tab-pane {
  color: green;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
  background: lightgoldenrodyellow
}

</style>
